<template>
	<view class="order-page-msg">
		 
		<view class="course-person-msg" v-for="(item,index) in courseDetail.activity_courses" :key='index'>
			<view class="course-title">
				{{test}}所报名第{{index+1}}个课程
			</view>
			<view class="course-msg-content">
				<view class="course-tip-msg">
					<image :src="item.image" mode=""></image>
					<view class="">
						{{item.name | goodName_val}}
					</view>
				</view>
				
				<view v-for="(form,n) in item.forms" :key="n">
					<view class="shortcut-write" v-if="index != 0">
						<view class="">快捷填写</view>
						<view class="" @click="quickWrite(index,item,n)">直接使用上1项报名信息</view>
					</view>
				<!-- <view class="" >{{JSON.stringify(courseDetail)}}</view> -->
					<view class="student-msg-title">
						<view class=""></view>
						<view class="">学员{{n+1}}报名信息</view>
						<view class=""></view>
					</view>
					<view class="student-msg-addre" @click="chooseAddre(item,index,n)">
						<input v-model="form.chooseAddreName" type="text" placeholder="请选择参与门店" @input="addreInput($event,item,n)"/>
						<image src="" :src="imglink + 'member/management_icon_textdelete.png'" mode="" @click="delInput(item,n)"></image>
					</view>
					<view class="student-msg-content" v-if="form.addreShow">
						<scroll-view scroll-y="true" scroll-with-animation  :style="'height:'+height+'px'" >
							<view @click="chooseaddreDetail(addre,item,index,n)" v-for="addre in form.courseAddre" :key='addre.salesroom_id'>{{addre.salesroom.name}}</view>
						</scroll-view>
					</view>
					<view class="student-msg-details" v-for="(info,inde) in form.form_field" :key="index">
						<view class="">
							<text v-if="isNeed">*</text>{{info.name.name}}
						</view>
						<input type="text" v-model="info.value" :placeholder="'请输入'+ info.name.name"/>
					</view>
				</view>
			</view>
		</view>
		<view class="submit-msg">
			<view class="" @click="submitMsg">
				提交所有报名信息
			</view>
		</view>
		<!-- 提交信息成功 -->
		<view class="save-popup" v-if="saveState">
			<view class="save-popup-img">
				<image :src="imglink + 'home/pop_icon_success.png'" mode=""></image>
			</view>
			<view class="save-popup-title">
				恭喜你 </br>
				信息提交成功
			</view>
		</view>
		<!-- 提交信息失败 -->
		<view class="save-popup" v-if="saveStateBad">
			<view class="save-popup-img">
				<image :src="imglink + 'home/pop_icon_failure.png'" mode=""></image>
			</view>
			<view class="save-popup-title">
				信息缺失</br>
				请继续填写 
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		filters: {
			goodName_val(value) {
				if (!value) return ''
				if (value.length > 40) {
					return value.slice(0, 40) + '...'
				}
				return value
			},
			goodName(value) {
				if (!value) return ''
				if (value.length > 38) {
					return value.slice(0, 38) + '...'
				}
				return value
			}
		},
		data(){
			return {
				imglink: this.$store.state.imgLink,
				saveState:false,
				saveStateBad:false,
				heigth:'',
				courseDetail:[],
				isGroup:'',
				options:"",
				store_id:'',
				// form:{},
				order_id:0,
				isNeed:false,
				height:'',
				addreShow:false,
				test:0
			}
		},
		onLoad(option) {
			console.log(option)
			this.order_id = option.order_id
			let store_id = parseInt(option.store_id,10);
			if(!store_id>0){
				store_id = uni.getStorageSync('store_id')
			}else{
				uni.setStorageSync('store_id', store_id)
			}
			this.store_id = store_id
			this.$store.commit('updateStoreId',store_id)
			this.options = option
			this.gainData()
		},
		methods:{
			delInput(item,n){
				item.forms[n].chooseAddreName =''
				item.forms[n].chooseAddreId = ''
			},
			addreInput(event,item,n){ 
				item.forms[n].chooseAddreName = event.detail.value
				if(item.forms[n].chooseAddreName == ''){
					item.forms[n].chooseAddreId = ''
				}
			},
			chooseaddreDetail(addre,item,index,n){
				item.forms[n].chooseAddreId = addre.salesroom_id
				item.forms[n].chooseAddreName = addre.salesroom.name
				item.forms[n].addreShow = false
				this.$set(this.courseDetail.activity_courses,index,item)
				console.log("together_order_msg",this.courseDetail.activity_courses)
			},
			chooseAddre(item,index,n){
				item.forms[n].addreShow = !item.forms[n].addreShow
				this.$set(this.courseDetail.activity_courses,index,item)
				console.log("together_order_msg",this.courseDetail.activity_courses)
			},
			gainData(){
				let data = {
					token:this.$store.getters.getToken,
					store_id:this.store_id,
					order_id:this.order_id
				}
				this.$api.gain_order_act_detail(data).then(res => {
					console.log("gain_order_act_detail",res)
					if(res.status){
						this.courseDetail = res.data
						this.getFormMsg(this.courseDetail.activity.activity_id)
					}
				}).catch(err => {
					console.log(err)
				})
			},
			gainCourseAddre(id,item,n){
				let data = {
					token:this.$store.getters.getToken,
					course_id:id
				}
				this.$api.order_choose_addre(data).then(res => {
					console.log("order_choose_addre",res)
					if(res.status){
						item.forms[n].courseAddre = res.salesroom		
						if(item.forms[n].courseAddre.length > 4){
							this.height = 145
						}else{
							this.height = ''
						}
						
							this.test=this.test+1
					}else{
						item.forms[n].courseAddre=[{salesroom_id: 0, salesroom: {name: "收款码"}}]
						if(item.forms[n].courseAddre.length > 4){
							this.height = 145
						}else{
							this.height = ''
						}
						this.test=this.test+1
					}					
					console.log("order_choose_addre.item",item)
				}).catch(err => {
					console.log(err)
				})
			},
			getFormMsg(id){
				let data = {
					token:this.$store.getters.getToken,
					activity_id:id
				}
				let that = this
				this.$api.together_order_msg(data).then(res => {
					console.log(res)
					if(res.status){
						that.form = res.res
						that.form.forEach(item => {
							item.value = ''
							if(item.name.required == 1){
								this.isNeed = true
							}
						})
						that.courseDetail.activity_courses.forEach(item => {
							item.forms =[]
							for(let n=0;n<item.quantity;n++){
								item.forms.push({})
								let form_field=JSON.parse(JSON.stringify(that.form))
								item.forms[n].form_field=form_field
								item.forms[n].chooseAddreId = ''
								item.forms[n].chooseAddreName = ''
								item.forms[n].addreShow = false
								this.gainCourseAddre(item.activity_course_id,item,n)
							}							 
						})
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			gainName(event,item,index,n){
				console.log(event)
				item.userName = event.detail.value
			},
			quickWrite(index,item,n){
				let num=this.courseDetail.activity_courses[index-1].forms.length
				console.log(item)
				item.forms.forEach((form,i)=>{
					let k=0
					if(i<=num-1){
						k=i
					}else{
						k=num-1
					}
					
					item.forms[i].form_field=JSON.parse(JSON.stringify(this.courseDetail.activity_courses[index-1].forms[k].form_field))
					// item.forms[i]=JSON.parse(JSON.stringify(this.courseDetail.activity_courses[index-1].forms[k]))
				})
				this.$set(this.courseDetail,index,item)
			},
			// 验证信息
			verification(){
				let flag = true
				let regEn = /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im,
					regCn = /[·！#￥（——）：；“”‘、，|《。》？、【】[\]]/im;
					this.courseDetail.activity_courses.forEach(item => {
						
						item.forms.forEach(form =>{
							if(form.chooseAddreId === ''){
								uni.showToast({
									title:'请选择参与门店',
									icon:'none',
									duration:2000
								})
								return flag = false
							}
							form.form_field.forEach(form_field=>{
								if(form_field.name.required == 1){
									if(form_field.value == ''){
										uni.showToast({
											title:'必填信息不能为空',
											icon:'none',
											duration:2000
										})
										return flag = false
									}
								}
							})
							
						})
					})
				return flag
			},
			submitMsg(){
				
					console.log(this.courseDetail.activity_courses)
				if(this.verification()){
					let data = {
						token:this.$store.getters.getToken,
						order_id:this.order_id,
						activity_id:this.courseDetail.activity_id,
						course:JSON.stringify(this.courseDetail.activity_courses)
					}
					this.$api.course_user_msg(data).then(res => {
						console.log(res)
						if(res.status){
							this.saveState = true
							setTimeout(()=> {
								this.saveState = false
								uni.navigateTo({
									url:"joinGroup?store_id=" + this.store_id + '&order_id=' + this.order_id
								})
							},1000)
						}
					}).catch(err => {
						console.log(err)
					})
				}
				
			}
		}
	
	}
</script>

<style>
	.student-msg-addre{
		width: 100%;
		height: 80upx;
		background: #F5F5F5;
		border-radius: 4upx;
		margin-top: 20upx;
		padding: 0 20upx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}
	.student-msg-addre>input{
		width: 100%;
		height: 100%;
		line-height: 80upx;
		font-size: 28upx;
		color: #333333;
		flex-grow: 1;
	}
	.student-msg-addre>image{
		width: 40upx;
		height: 40upx;
		margin-top: 20upx;
	}
	.student-msg-content{
		width: 100%;
		/* height: 300upx; */
		padding: 0 20upx;
		box-sizing: border-box;
		background: #FFFFFF;
		box-shadow: 0upx 16upx 20upx 0upx rgba(0, 0, 0, 0.2);
	}
	.student-msg-content view{
		line-height: 80upx;
		color: #666666;
		font-size: 28upx;
		border-bottom: 1upx solid #DEDEDE;
	}
	.student-msg-content>scroll-view>view:last-child{
		border-bottom: none;
	}
	.save-popup{
		width: 240upx;
		height: 240upx;
		border-radius: 12upx;
		background: rgba(58,58,58,0.9);
		position: fixed;
		left: 50%;top: 50%;
		transform: translate(-50%,-50%);
		z-index: 999;
	}
	.save-popup-img{
		width: 72upx;
		height: 72upx;
		margin: 0 auto;
		margin-top: 58upx;
	}
	.save-popup-img>image{
		width: 100%;
		height: 100%;
	}
	.save-popup-title{
		text-align: center;
		color: #FFFFFF;
		font-size: 28upx;
		margin-top: 16upx;
	}
	page{
		background-color: #F3F3F4;
	}
	.order-page-msg{
		width: 100%;
		height: 100%;
		position: relative;
		padding-bottom: 140upx;
		box-sizing: border-box;
	}
	.course-person-msg{
		width: 100%;
		background: #FFFFFF;
		margin-top: 2upx;
		padding-bottom: 40upx;
		box-sizing: border-box;
		margin-bottom: 20upx;
	}
	.course-title{
		width: 100%;
		padding: 30upx;
		box-sizing: border-box;
		color: #333333;
		font-size: 30upx;
		border-bottom: 1upx solid #DEDEDE;
	}
	.course-msg-content{
		width: 100%;
		padding: 0 30upx;
		box-sizing: border-box;
	}
	.course-tip-msg{
		width: 100%;
		padding: 30upx 0;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		border-bottom: 1upx solid #DEDEDE;
	}
	.course-tip-msg>image{
		width: 160upx;
		height: 120upx;
	}
	.course-tip-msg>view{
		width: 510upx;
		color: #333333;
		font-size: 26upx;
	}
	.student-msg-title{
		width: 100%;
		display: flex;
	}
	.student-msg-title>view:first-child{
		margin-left: 30upx;
	}
	.student-msg-title>view:first-child,.student-msg-title>view:last-child{
		width: 	190upx;
		border-top: 1upx solid #DEDEDE;
		margin-top: 52upx;
	}
	.student-msg-title>view:nth-child(2){
		color: #333333;
		font-size: 34upx;
		margin: 28upx 20upx 0;
	}
	.student-msg-details{
		width: 100%;
		height: 80upx;
		line-height: 80upx;
		background: #F5F5F5;
		border-radius: 4upx;
		display: flex;
		margin-top: 40upx;
	}
	.student-msg-details>view{
		width: 30%;
		color: #333333;
		font-size: 28upx;
		background: #ECECEC;
		text-align: center;
	}
	.student-msg-details>view>text{
		color: #FF391F;
		display: inline-block;
		margin-right: 6upx;
	}
	.student-msg-details>input{
		width: 70%;
		padding: 0 20upx;
		box-sizing: border-box;
		height: 100%;
		font-size: 28upx;
	}
	.shortcut-write{
		width: 100%;
		margin-top: 30upx;
	}
	.shortcut-write>view:first-child{
		color: #999999;
		font-size: 28upx;
		text-align: center;
	}
	.shortcut-write>view:last-child{
		width: 642upx;
		height: 92upx;
		line-height: 92upx;
		text-align: center;
		color: #FF8B46;
		font-size: 32upx;
		border: 1upx solid #FF8B46;
		border-radius: 44upx;
		margin: 0 auto;
		margin-top: 8upx;
	}
	.submit-msg{
		width: 100%;
		padding: 10upx 54upx;
		box-sizing: border-box;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;left: 0;
	}
	.submit-msg>view{
		width: 638upx;
		height: 80upx;
		line-height: 80upx;
		background: linear-gradient(to right,#FE9543,#FF664F);
		box-shadow: 0 4upx 12upx 0 rgba(250, 176, 48, 0.55);
		border-radius: 	44upx;
		color: #FFFFFF;
		font-size: 28upx;
		text-align: center;
	}
</style>
